<template>
  <el-dropdown @visible-change="getDownloadInfo" ref="dropdownPanel">
    <el-badge :value="downloadNum" :hidden="downloadNum == '0'" class="header-action-download">
      <icon-svg name="iconDownload"></icon-svg>
    </el-badge>
    <el-dropdown-menu slot="dropdown">
      <div class="min-info-item">
        <h3>下载列表</h3>
        <template v-if="loading || dataList.length">
          <ul class="main-info-list">
            <li v-for="item in dataList" :key="item.fieldId">
              <div class="list-item">
                <i class="el-icon-check" v-if="item.downloadStatus"></i>
                <span @click="download(item)">{{ item.fileName }}</span>
                <i class="el-icon-download" @click="download(item)"></i>
              </div>
            </li>
          </ul>
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="params.currentPageNum"
            :page-size="params.pageSize"
            :pager-count="5"
            background
            layout="total, prev, pager, next"
            small
            :total="totalSize"
          >
          </el-pagination>
        </template>
        <p v-else>
          <img src="~@/assets/img/no_records.png" /> <br />
          暂无数据
        </p>
      </div>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
import SockJS from 'sockjs-client'
import Stomp from 'stompjs'
export default {
  data() {
    return {
      stompClient: null,
      downloadNum: 0,
      dataList: [],
      loading: false,
      params: {
        ascs: [],
        descs: [],
        currentPageNum: 1,
        pageSize: 10,
        queryParams: {},
        descPriority: false
      },
      totalSize: 0
    }
  },
  created() {
    this.getList()
    this.connectSocket()
  },
  methods: {
    getDownloadInfo(visible) {
      if (visible) {
        this.getList()
      }
    },
    getList() {
      this.loading = true
      this.$ajax({
        url: this.$ajax.setUrl('tagFactory/derivedDownPage'),
        method: 'get',
        params: this.$ajax.setParams(this.params)
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.dataList = data.data.records
          this.totalSize = data.data.totalSize
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.loading = false
      })
    },
    handleCurrentChange(val) {
      this.params.currentPageNum = val
      this.getList()
    },
    download(item) {
      this.$utils.downloadCustomFile('tagFactory/file', {
        fileId: item.fileId
      })
    },
    connectSocket() {
      const socketUrl = window.TAG_CONFIG['socketUrl']
      const socket = new SockJS(socketUrl + 'msg')
      this.stompClient = Stomp.over(socket)
      this.stompClient.connect({}, () => {
        this.stompClient.subscribe(`/user/${this.$store.state.user.id}/msg/num`, data => {
          this.downloadNum = data.body
        })
        this.stompClient.send('/app/getMsg', {}, this.$store.state.user.id)
      })
    },
    disConnect() {
      if (this.stompClient != null) {
        this.stompClient.disconnect()
        this.stompClient = null
      }
    }
  },
  beforeDestroy() {
    this.disConnect()
  }
}
</script>

<style lang="scss">
.min-info-item {
  width: 350px;
  padding: 10px 20px;
  .tag-content-header {
    padding: 0 20px;
  }
  h3 {
    text-align: center;
  }
  p {
    line-height: 30px;
    text-align: center;
    img {
      width: 150px;
      margin: 10px 0;
    }
  }
  .main-info-list {
    height: 360px;
    margin: 10px 0;
    li {
      .list-item {
        padding: 0 30px 0 20px;
        color: #666;
        line-height: 35px;
        border-bottom: 1px solid #eee;
        position: relative;
        right: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      span {
        cursor: pointer;
      }
      i {
        font-size: 17px;
        position: absolute;
        color: #4d82e9;
      }
      .el-icon-check {
        color: #67c23a;
        top: 9px;
        left: 0;
      }
      .el-icon-download {
        cursor: pointer;
        top: 7px;
        right: 10px;
      }
      &:hover {
        background-color: #eee;
        span {
          text-decoration: underline;
        }
      }
    }
  }
  .el-pagination {
    text-align: right;
  }
}
</style>
